@import '../helper/utils';

$img_path: '../../res/img/';

$slide_atime: .5s;
@import './cover';
@import './p1';
@import './p2';
@import './p3';
@import './p4';
@import './p5';
@import '../progress/progress';
$img_path: '../../res/img/';
%nor_fit {
  margin: 0;
  padding: 0;
  height: 100%;
}

html, body, .mom {
  @extend %nor_fit;
  overflow: hidden;
}

.mom {
  position: relative;
  $child_num: 6;
  @at-root {
    .position_mom_css {
      @extend %nor_fit;
      @include vp(transition, all .5s linear);
      &.sliding {
        @include vp(transition, none);
      }
      @at-root {
        .child {
          position: absolute;
          width: 100%;
          height: 100%;
          @for $i from 1 through $child_num {
            &:nth-child(#{$i}) {
              @include vp(transform, translate3d(0, ( $i  - 1 ) * 100%, 0));
            }
          }
        }
      }
    }
  }
}

.loading_mom_container {
  width: 100%;
  padding: 0 40px;
  position: absolute;
  bottom: 60px;
  box-sizing: border-box;
  text-align: center;
  @at-root {
    .icon_loading_img {
      $origin_width: 50px;
      background: url($img_path + 'rest/icon.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_width/2;
      margin: 0 auto;
    }

    .pack_loading_container {
      width: 100%;
      outline: 1px solid rgb(113, 113, 113);
      @at-root {
        .progress_loading_state {
          margin-top: 5px;
          margin-bottom: 5px;
          height: 3px;
          background: #8c66dd;
          width: 1%;
        }
      }
    }

    .trying_loading_text {
      font-family: microsoft yahei;
      font-size: 14px;
      color: rgb(113, 113, 113);
    }
  }
}

.guide_mom_collection {
  $_img_path: $img_path+'cover/';
  position: absolute;
  bottom: 0;
  left: 50%;
  @include vp(transform, translateX(-50%));
  @at-root {
    .arrow_guide_img {
      $origin_width: 54px;
      $origin_height: 27px;
      background: url($_img_path  + 'arrow.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin: 15px auto;
      display: none;

      @include vp(animation, swaying 1s ease-in-out infinite);
      @at-root {
        @keyframes swaying {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            transform: translateY($origin_height);
          }
        }
        @-webkit-keyframes swaying {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            -webkit-transform: translateY($origin_height);
          }
        }
      }
    }

    .tiptoe_guide_img {
      $origin_width: 198px;
      $origin_height: 27px;
      background: url($_img_path  + 'tiptoe.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
    }
  }
}

.progress_mom_placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: white;
  overflow: scroll;
  z-index:3;
  @include vp(transform, translateX(100%));
  @include vp(transition, all .5s ease-in-out);
  &.show {
    @include vp(transform, translateX(0));
  }
  @at-root {
    .banner_stickTop_img {
      margin: 0 auto;
    }
  }
}

.audio_mom_img {
  $origin_width: 72px;
  $origin_height: 72px;
  background: url($img_path + 'cover/audio.png') no-repeat;
  background-size: $origin_width/2;
  width: $origin_width/2;
  height: $origin_height/2;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  @include vp(animation, audioRotate 2s linear infinite);
  &.pause {
    @include vp(animation-play-state, paused);
  }
  @at-root {
    @keyframes audioRotate {
      0% {
        @include vp(transform, rotateZ(0));
      }
      100% {
        @include vp(transform, rotateZ(1turn));
      }
    }
    @-webkit-keyframes audioRotate {
      0% {
        @include vp(transform, rotateZ(0));
      }
      100% {
        @include vp(transform, rotateZ(1turn));
      }
    }
  }
}